﻿@page "/tests/datagrid/selection/row-detail"
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Datagrid: Row Detail</CardTitle>
            </CardHeader>
            <CardBody>
                <Paragraph>
                    Employees who have Salaries defined are eligible to Display a DetailRowTemplate. Here we defined a new DataGrid with the Salaries.
                    Try clicking some employees and taking a look at their Salaries.
                </Paragraph>
                <Paragraph>
                    You may also use the ToggleDetailRow API to programatically toggle a row.
                </Paragraph>
                <Paragraph>
                    <Select TValue="int" @bind-SelectedValue="@selectedEmployeeIdForDetailRow">
                        <SelectItem Value="0"></SelectItem>
                        @foreach ( var item in inMemoryData )
                        {
                            <SelectItem Value="item.Id">@item.FirstName</SelectItem>
                        }
                    </Select>
                    <Button Clicked="ToggleDetailRow"> Toggle Detail Row</Button>
                </Paragraph>
            </CardBody>
            <CardBody>
                <DataGrid TItem="Employee"
                          @ref="dataGridRef"
                          Data="inMemoryData"
                          Responsive
                          ShowPager
                          ShowPageSizes
                          @bind-SelectedRow="@selectedEmployee"
                          DetailRowTrigger="@((e)=>e.Item.Salaries?.Count > 0)"
                          DetailRowStartsVisible="false">
                    <DataGridColumns>
                        <DataGridColumn TextAlignment="TextAlignment.Center" TItem="Employee" Field="@nameof( Employee.Id )" Caption="#" Width="60px" />
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="First Name">
                        </DataGridColumn>
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.LastName )" Caption="Last Name" />
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Email )" Caption="Email" />
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.City )" Caption="City">
                            <CaptionTemplate>
                                <Icon Name="IconName.City" /> @context.Caption
                            </CaptionTemplate>
                        </DataGridColumn>
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Zip )" Caption="Zip">
                        </DataGridColumn>
                        <DataGridDateColumn TItem="Employee" Field="@nameof( Employee.DateOfBirth )" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Editable />
                        <DataGridNumericColumn TItem="Employee" Field="@nameof( Employee.Childrens )" Caption="Childrens" Editable Filterable="false" />
                        <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" />
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Salary )" Caption="Salary" Editable Width="140px" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" TextAlignment="TextAlignment.End">
                        </DataGridColumn>
                        <DataGridCheckColumn TItem="Employee" Field="@nameof(Employee.IsActive)" Caption="Active" Editable Filterable="false">
                            <DisplayTemplate>
                                <Check TValue="bool" Checked="context.IsActive" Disabled ReadOnly />
                            </DisplayTemplate>
                        </DataGridCheckColumn>
                    </DataGridColumns>
                    <DetailRowTemplate>
                        @{
                            var salaries = ( context as Employee ).Salaries;

                            <DataGrid TItem="Salary"
                                  Data="salaries"
                                  Sortable="false"
                                  ShowCaptions="false"
                                  RowSelectable="(x) => false">
                                <DataGridCommandColumn TItem="Salary" />
                                <DataGridDateColumn TItem="Salary" Field="@nameof(Salary.Date)" Caption="Date" />
                                <DataGridNumericColumn TItem="Salary" Field="@nameof(Salary.Total)" Caption="Total" />
                            </DataGrid>
                        }
                    </DetailRowTemplate>
                </DataGrid>
            </CardBody>
        </Card>
    </Column>
</Row>


@code {

    [Inject] EmployeeData EmployeeData { get; set; }

    private DataGrid<Employee> dataGridRef;
    private int selectedEmployeeIdForDetailRow;

    private IEnumerable<Employee> inMemoryData;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 );
        await base.OnInitializedAsync();
    }

    private Task ToggleDetailRow()
    {
        var employee = inMemoryData.FirstOrDefault( x => x.Id == selectedEmployeeIdForDetailRow );
        return dataGridRef.ToggleDetailRow( employee );
    }
}